<template>
	<view class="con">
		<u-navbar :autoBack="true" bgColor='transparent' leftIconColor='#fff'>
		</u-navbar>
		
		<image class="haib" src="./static/haib.png" mode=""></image>
		<image class="haibbt" src="static/bgbt.png" mode=""></image>
		<view class="" style="display: flex;align-items: center;justify-content: center;width: 750rpx;position: absolute;top: 650rpx;">
			<view class="qr">
				<image style="width: 120px;height: 120px;" src="/pages/friend/static/share.jpg" mode=""></image>
				<!-- <canvas canvas-id="qrcode" v-show="qrShow" style="width: 120px;height:120px;margin: 0 auto;" /> -->
			</view>
		</view>
		
		<view class="invite">
			邀请码:{{userinfo.invite}}
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				userinfo:{},
				qrShow: false,
			};
		},
		methods:{
			qrFun: function(text) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 120,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			}
		},
		onLoad() {
			this.userinfo=uni.getStorageSync('userinfo')
			this.pt = uni.getSystemInfoSync().statusBarHeight + 44
			this.qrFun('18112217250')
		}
	}
</script>

<style lang="less">
.con{
	min-height: 100vh;
	position: relative;
	background-color: #fa5c0a;
	.haib{
		height: 1334rpx;
		width: 750rpx;
		top: 0;
		// color: transparent;
	}
	.haibbt{
		width: 750rpx;
		height: 415rpx;
		bottom: 0;
		position: absolute;
		left: 0;
	}
	.invite{
		position: absolute;
		top: 940rpx;
		// right: 260rpx;
		text-align: center;
		width: 750rpx;
		color: #fff;
		font-size: 36rpx;
		// font-weight: bold;
	}
}
.qr{
	// border: 20rpx solid #fff;
	// padding: 20rpx;
	// background-color: #fff;
}
</style>
